<template>
	<div>
		<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
		 :title="title" :visible.sync="addAndCompileShow">
			<el-form size="mini" ref='form' :model="form" label-width="110px" v-loading='loading'>
				<el-row :gutter="10">
					<el-col :span="7">
						<el-form-item label="电梯注册代码:">
							<el-select v-model="form.liftCode" placeholder="请选择电梯注册代码" clearable filterable :disabled='detailDisable'>
								<el-option v-for="item in liftCodeArr" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset='1'>
						<el-form-item label="更换方式:">
							<el-select v-model="form.manner" placeholder="请选择更换方式" clearable :disabled='detailDisable'>
								<el-option v-for="(item,index) in mannerArr" :key="item.value" :label="item.label" :value="item.label">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset='1'>
						<el-form-item label="更换人:">
							<el-select v-model="form.replacePerson" placeholder="请选择更换人" :disabled='detailDisable' clearable filterable>
								<el-option v-for="item in replacePersonArr" :key="item.person" :label="item.name" :value="item.person">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="7">
						<el-form-item label="配件号:">
							<el-input v-model="form.partsNo" clearable placeholder="请输入配件号" :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset='1'>
						<el-form-item label="配件名称:">
							<el-input v-model="form.partsName" clearable placeholder="请输入配件名称" :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset='1'>
						<el-form-item label="配件类型:">
							<el-input v-model="form.partsType" clearable placeholder="请输入配件类型" :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="7">
						<el-form-item label="原配件号:">
							<el-input v-model="form.originalPartsNo" clearable placeholder="请输入原配件号" :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset='1'>
						<el-form-item label="更换时间:">
							<el-date-picker format='yyyy-MM-dd' value-format='yyyy-MM-dd' v-model="form.replace_time" type="date"
							 placeholder="请选择更换时间" clearable :disabled='detailDisable'>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset='1'>
						<el-form-item label="质保时间:">
							<el-date-picker format='yyyy-MM-dd' value-format='yyyy-MM-dd' v-model="form.warranty_time" type="date"
							 placeholder="请选择质保时间" clearable :disabled='detailDisable'>
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="审批材料:">
							<el-upload :on-preview="upLoadPreview" action="" accept=".jpg,.jpeg,.png" :file-list="fileList" :on-change="upLoadChange"
							 :on-remove="upLoadRemove" :auto-upload="false" list-type="picture" name="upfile" :disabled='detailDisable'>
								<el-button size="mini" type="primary" :disabled='detailDisable'>点击上传审批材料</el-button>
								<div slot="tip" class="upLoadText">只能上传JPG/PNG/JPEG图片,大小不超过800kb/最多上传10张</div>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submit('form')" v-loading='ensureBtn' v-if="!detailDisable">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		axiosChange,
		moment
	} from "@/common.js";
	export default {
		props: {
			currentId: {
				type: Number,
				default () {
					return 0
				}
			},
			currentType: {
				type: Number,
				default () {
					return 0
				}
			},
			addAndCompileShow: {
				type: Boolean,
				default () {
					return false
				}
			},
			title: {
				type: String,
				default () {
					return '添加配件'
				}
			}
		},
		mounted() {
			this.getMessage()
			if (this.currentId) {
				this.loading = true
				this.getCompList()
			}
			if (this.currentType == 2) {
				this.detailDisable = true
			} else {
				this.detailDisable = false
			}
		},
		data() {
			return {
				loading: false,
				ensureBtn: false,
				detailDisable: false,
				form: {
					liftCode: '',
					manner: '',
					replacePerson: '',
					partsNo: '',
					partsName: '',
					partsType: '',
					originalPartsNo: '',
					replace_time: '',
					warranty_time: ''
				},
				liftCodeArr: [],
				mannerArr: [{
						label: '质保期内更换',
						value: '质保期内更换'
					}, {
						label: '过保更换',
						value: '过保更换'
					},
					{
						label: '新增',
						value: '新增'
					}
				],
				replacePersonArr: [],
				imgDialogShow: false,
				dialogImgUrl: '',
				fileList: []
			}
		},
		methods: {
			getCompList() {
				let url = '/basic/fittings/' + this.currentId+'/'
				axiosGet(url, '', (res) => {
					this.loading = false
					if (res.code == 0) {
						this.form.liftCode = res.detail.register_code
						this.form.manner = res.detail.replace_mode
						this.form.replacePerson = res.detail.person
						this.form.partsNo = res.detail.number
						this.form.partsName = res.detail.name
						this.form.partsType = res.detail.atype
						this.form.originalPartsNo = res.detail.old_number
						this.form.replace_time = res.detail.replace_time
						this.form.warranty_time = res.detail.warranty_time
						if (res.detail.register_files) {
							let arr = res.detail.register_files.split(',')
							this.fileList = arr.map((item) => ({
								name: '',
								url: item
							}))
						} else {
							this.fileList = []
						}
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			upLoadPreview(file) {
				this.imgDialogShow = true
				this.dialogImgUrl = file.url
			},
			//上传文件之前触发
			upLoadChange(file, fileList) {
				const isLt2M = file.size / 1024 < 800;
				if (file.name.split(".")[1] != "jpg" && file.name.split(".")[1] != "png" && file.name.split(".")[1] != "jpeg") {
					this.$message.error('只能上传JPG/PNG/JPEG格式图片');
					this.fileList = fileList.slice(0, -1);
					return
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 800kb!,请重新上传');
					this.fileList = fileList.slice(0, -1);
					return
				}
				this.fileList = fileList.slice(-10);
			},
			//删除文件之前的函数
			upLoadRemove(file, fileList) {
				this.fileList = fileList;
			},
			getMessage() {
				axiosGet('/basic/fittings/persons/', '', (res) => {
					if (res.code == 0) {
						this.liftCodeArr = res.detail.register_codes
						this.replacePersonArr = res.detail.persons
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//上传照片接口
			uploadImage(imgList, num) {
				if (imgList.leng != 0) {
					const formData = new FormData();
					formData.append("upfile", imgList[num].raw)
					return this.$axios({
						url: "/utils/upload/",
						method: "post",
						data: formData
					})
				} else {
					console.log('没有照片')
				}
			},
			close() {
				this.$emit('closeDialog')
			},
			submit(form) {
				this.$refs[form].validate(async (valid) => {
					if (valid) {
						this.ensureBtn = true
						let arr = []
						let permises = []
						for (let i = 0; i < this.fileList.length; i++) {
							if (this.fileList[i].raw) {
								permises.push(this.uploadImage(this.fileList, i))
							} else {
								arr.push(this.fileList[i].url)
							}
						}
						const res = await Promise.all(permises)
						for (let i = 0; i < res.length; i++) {
							res[i].code == 0 && arr.push(res[i].detail)
						}
						let url = ''
						let method = ''
						let data = {
							register_code: this.form.liftCode,
							replace_mode: this.form.manner,
							person: this.form.replacePerson,
							number: this.form.partsNo,
							name: this.form.partsName,
							atype: this.form.partsType,
							old_number: this.form.originalPartsNo,
							replace_time: this.form.replace_time,
							warranty_time: this.form.warranty_time,
							register_files: arr.length > 0 ? arr.join(',') : '',
						}
						if (this.currentType == 0) {
							url = '/basic/fittings/'
							method = 'post'
						} else {
							url = '/basic/fittings/'+this.currentId+'/'
							method = 'put'
						}
						axiosChange(url, method, data, (res) => {
							this.ensureBtn = false
							if (res.code == 0) {
								this.$message.success('操作成功')
								this.$emit('success')
							} else {
								this.$message.error(res.detail.result)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.el-row {
		margin: 0 !important;
	}
</style>
